<template>
  <div>
    <!-- 头部组件 -->
    <IndexHead></IndexHead>
    <!-- 列表内容部分 -->
    <div class="w">
      <el-container>
        <el-header>{{ title }}</el-header>
        <el-container>
          <el-aside width="200px">
            <el-row>
              <el-col :span="24">
                <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                  background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                  <el-menu-item index="1">
                    <span slot="title" @click="huoqu">
                      <i class="el-icon-star-on"></i>
                      中心动态</span>
                  </el-menu-item>
                  <el-menu-item index="2">
                    <span slot="title" @click="huoqu1">
                      <i class="el-icon-s-opportunity"></i>
                      服务项目</span>
                  </el-menu-item>
                  <el-menu-item index="3">
                    <span slot="title" @click="huoqu2">
                      <!-- @click="change(2)" :class="{ newStyle: 2 === number }" -->
                      <i class="el-icon-user"></i>
                      人才招聘</span>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </el-aside>
          <el-main>
            <div class="dongtai" v-show='0 === number'>
              <div class="liebiao">
                <router-link to="/ListDetailed">互联社区 为社区治理装上“智慧大脑”</router-link>
                <i>2023/2/27</i>
              </div>
              <el-divider></el-divider>
              <div class="liebiao">
                <a href="">深入学习贯彻党的二十大精神</a>
                <i>2023/2/12</i>
              </div>
              <el-divider></el-divider>
            </div>

            <div class="xiangmu" v-show='1 === number'>
              <div class="liebiao">
                <a href="">互联社区学苑</a>
                <i>2023/2/27</i>
              </div>
              <el-divider></el-divider>
              <div class="liebiao">
                <a href="">"互联网"+推动治理能力现代化</a>
                <i>2023/2/12</i>
              </div>
              <el-divider></el-divider>
            </div>

            <div class="zhaopin" v-show='2 === number'>
              <div class="liebiao">
                <a href="">中心诚聘社工英才~</a>
                <i>2023/3/5</i>
              </div>
              <el-divider></el-divider>
              <div class="liebiao">
                <a href="">中心诚聘社工英才~</a>
                <i>2023/3/5</i>
              </div>
              <el-divider></el-divider>
              <div class="liebiao">
                <a href="">中心诚聘社工英才~</a>
                <i>2023/3/5</i>
              </div>
              <el-divider></el-divider>
              <div class="liebiao">
                <a href="">中心诚聘社工英才~</a>
                <i>2023/3/5</i>
              </div>
              <el-divider></el-divider>
              <div class="liebiao">
                <a href="">中心诚聘社工英才~</a>
                <i>2023/3/5</i>
              </div>
              <el-divider></el-divider>
            </div>
          </el-main>
        </el-container>
      </el-container>
      <!-- 分页器 -->
      <el-pagination background layout="prev, pager, next" :total="1000" class="pagination">
      </el-pagination>
    </div>
    <!-- 尾部组件 -->
    <IndexFooter></IndexFooter>
  </div>
</template>
<script>
import IndexHead from '@/components/IndexHead.vue'
import IndexFooter from '@/components/IndexFooter.vue'
export default {
  name: 'list',
  data() {
    return {
      number: 0,
      title: '中心动态'
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // change: function (index) {
    //   this.number = index;
    // },
    huoqu() {
      this.number = 0
      this.title = '中心动态'
    },
    huoqu1() {
      this.number = 1
      this.title = '服务项目'
    },
    huoqu2() {
      this.number = 2
      this.title = '人才招聘'
    },
  },
  components: {
    IndexHead,
    IndexFooter,
  },
}
</script>
<style lang="scss">
@import '@/styles/list.scss'
</style>
